<template>
    <div>
        <el-card>
            <el-form :inline="true">
                <el-form-item label="一级分类">
                    <el-select v-model="categoryStore.c1Id" @change="categoryStore.getC2"
                        :disabled="showAttr ? false : true">
                        <!-- label即为展示数据,value即为下拉菜单收集的数据 -->
                        <el-option v-for="(item, index) in categoryStore.c1Arr" :key="item" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类">
                    <el-select v-model="categoryStore.c2Id" @change="categoryStore.getC3"
                        :disabled="showAttr ? false : true">
                        <el-option v-for="(item, index) in categoryStore.c2Arr" :key="item" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="三级分类">
                    <el-select v-model="categoryStore.c3Id" :disabled="showAttr ? false : true">
                        <el-option v-for="(item, index) in categoryStore.c3Arr" :key="item" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script setup lang='ts'>
//接收父组件传递过来的值showAttr
defineProps(['showAttr'])
//引入生命周期函数的钩子
import { ref, watch, onMounted } from 'vue'
//引入分类数据的仓库
import useCateGoryStore from '@/store/modules/category';
//实例化仓库
let categoryStore = useCateGoryStore()
//全局组件挂载完毕,通知仓库发请求获取一级分类的数据

//组件挂载完毕
onMounted(() => {
    getc1()
})
//通知仓库获取一级分类的数据
const getc1 = async () => {
    categoryStore.getC1();
}

//使用watch属性监测id的选择改变并清空下拉菜单的显示值
watch(() => categoryStore.c1Id, () => {
    categoryStore.c2Id = ''
    categoryStore.c3Id = ''
})
watch(() => categoryStore.c2Id, () => {
    categoryStore.c3Id = ''
})
</script>
<style lang='scss' scoped></style>